<template>
  <div>
    <CloudTable class="test-table" :columns="columns" :dataSource="dataSource"> </CloudTable>
    <div class="pagination-box">
      <CloudPagination :current="current" @change="changePage"></CloudPagination>
    </div>
  </div>
</template>

<script>
  export default {
    title: '3.带翻页',
    subTitle: '翻页用CloudPagination，表格不内置',
    data () {
      return {
        current: 1,
        columns: [
          {
            title: 'name',
            dataIndex: 'name',
          },
          {
            title: 'Age',
            dataIndex: 'age',
          },
          {
            title: 'Sex',
            dataIndex: 'sex',
          },
        ],
        dataSource: [
          {
            key: '1',
            name: 'John Brown',
            age: 32,
            sex: '男'
          },
          {
            key: '2',
            name: 'Jim Green',
            age: 42,
            sex: '女'
          },
          {
            key: '3',
            name: 'Joe Black',
            age: 32,
            sex: '男'
          },
        ]
      }
    },
    methods: {
      changePage (page, pageSize) {
        this.current = page;
      }
    }
  }
</script>
<style lang="scss" scoped>
  .pagination-box {
    display: flex;
    justify-content: flex-end;
  }
</style>